<template>
  <div class="container">
    <el-row :gutter="24">
      <el-col :span="8">
        <div class="left-side">
          <div class="statistics-box">
            <div class="statistics">
              <div class="title">{{role.title}}</div>
              <div class="number">{{role.number}}</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="left-side">
          <div class="statistics-box">
            <div class="statistics">
              <div class="title">{{product.title}}</div>
              <div class="number">{{product.number}}</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="left-side">
          <div class="statistics-box">
            <div class="statistics">
              <div class="title">{{order.title}}</div>
              <div class="number">{{order.number}}</div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="12">
        <div class="left-side">
          <div class="statistics-box">
            <div class="statistics">
              <div class="title">{{daily.title}}</div>
              <div class="number">{{daily.number}}</div>
              <div class="amount">成交金额：{{daily.amount}}</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="left-side">
          <div class="statistics-box">
            <div class="statistics">
              <div class="title">{{monthly.title}}</div>
              <div class="number">{{monthly.number}}</div>
              <div class="amount">成交金额：{{monthly.amount}}</div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
export default {
  data() {
    return {
      role: {
        title: "角色数量",
        number: parseInt("0").toLocaleString(),
      },
      product: {
        title: "产品数量",
        number: parseInt("0").toLocaleString()
      },
      order: {
        title: "订单数量",
        number: parseInt("0").toLocaleString()
      },
      daily: {
        title: "当日成交订单数量",
        number: parseInt("0").toLocaleString(),
        amount: '0.00'
      },
      monthly: {
        title: "当月成交订单数量",
        number: parseInt("0").toLocaleString(),
        amount: '0.00'
      },
      params: {
        "access-token": window.localStorage.getItem("token")
      },
      cameraList: [],
      selected: {}
    };
  },
  created: function() {
    this.getData();
  },
  methods: {
    getData() {
      this.axios.get("dashboards", { params: this.params }).then(res => {
        let data = res.data.data;
        this.role.number = parseInt(data.roleCount).toLocaleString();
        this.product.number = parseInt(data.productCount).toLocaleString();
        this.order.number = parseInt(data.orderCount).toLocaleString();
        this.daily.number = parseInt(data.dailyOrderCount).toLocaleString();
        this.monthly.number = parseInt(data.monthlyOrderCount).toLocaleString();
        this.daily.amount = data.dailyOrderAmount;
        this.monthly.amount = data.monthlyOrderAmount;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../assets/css/common.scss";

.container {
  overflow: hidden;
  color: #ffffff;

  .left-side {
    .statistics-box {
      width: 100%;
      height: 225px;
      margin-bottom: 20px;
      display: table;

      .statistics {
        height: 100%;
        display: table-cell;
        vertical-align: middle;
        text-align: center;

        .title {
          padding-bottom: 20px;
        }

        .number {
          font-size: 40px;
          padding-bottom: 20px;
        }
      }
    }
  }

  .right-side {
    .statistics-box {
      height: 100%;
      min-height: 715px;

      #identify {
        padding: 20px;
      }
    }
  }

  .pie-box {
    padding-bottom: 2%;

    #gender,
    #recognition,
    #age {
      height: 380px;
    }
  }

  .bar-box {
    padding-bottom: 2%;

    #camera {
      height: 800px;
    }

    height: 800px;
  }

  .statistics-box {
    background-color: $boxBg;
  }
}
</style>
